<template>
	<div>
		<div class="p-6">
			<el-card class="!border-none pt-4" shadow="never">
				<el-form class="ls-form" :model="formData" inline>
					<el-form-item label="产品名称">
						<el-input class="w-[280px]" placeholder="请输入" v-model="formData.admin_name" clearable
							@keyup.enter="resetPage" />
					</el-form-item>
			
					<el-form-item label="产品分类">
						<el-select class="w-[280px]" v-model="formData.type" placeholder="请选择">
							<el-option v-for="(item, index) in visitType" :key="index" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="resetPage">查询</el-button>
						<el-button @click="resetParams">重置</el-button>
					</el-form-item>
				</el-form>
			</el-card>
		</div>
		<div class="mt-[30px] pl-6">
			<div class="flex flex-wrap">			
				<div v-for="i in 10" class="grid-content ep-bg-purple md:w-[16.2%] lg:w-[15%] mr-5 mb-7"
				>
				<router-link
				    :to="{
				        path: getRoutePath('product.product/detail'),
				        query: {
				            id: i
				        }
				    }"
				>
					<div class="bg-white ">
						<div>
							<el-image 
							class="margin-auto"
							:src="newsImg" 
							fit="fill" />
						</div>
						 <div class="p-2 main-color">
							 <div class="title font-medium line-clamp-2 h-10">
								 产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称
							 </div>
							 <div class="font-bold text-lg mt-[18px] mb-1">
								 $ 12900
							 </div>
						 </div>
					</div>
				</router-link>	
				</div>				
			</div>	
		</div>



	</div>
</template>

<script lang="ts" setup>
	import newsImg from "./goods.jpeg";
	import { computed, onMounted, reactive, ref, shallowRef } from 'vue'
	import { getRoutePath } from '@/router'
	const formData = reactive({
		admin_name: '',
		url: '',
		ip: '',
		type: '',
		start_time: '',
		end_time: ''
	})
	// 产品分类
	const visitType = ref<Array<any>>([
		{
			label: '反击破配件',
			value: '1'
		},
		{
			label: '鄂破配件',
			value: '2'
		},
	])
</script>

<style>
	.el-row {
		margin-bottom: 20px;
	}

	.el-row:last-child {
		margin-bottom: 0;
	}

	.el-col {
		border-radius: 4px;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}
</style>